<template>
    <div class="fightpx">
        <!-- 头部奖品盒子部分 -->
        <ul class="box-list">
          <li>
            <div class="box">
              <img src="../../assets/hbb-list-box.png" >
            </div>
            <img class="wuqi" src="../../assets/gun2.png" >
          </li>
          <li :class="{'activ':indexlist==0}">
             <div class="box">
               <img src="../../assets/hbb-list-box.png" >
             </div>
            <img class="wuqi" src="../../assets/gun2.png" >
          </li>
          <p @click="gotobolck(0)">返回<img src="../../assets/fanhui-icon.png" ></p>
        </ul>
        <!-- 中间状态部分 -->
        <div class="cent-box">
          <p v-if="game"></p>
          <div>
            <div class="hedar">
              <div v-if="prepare" class="prepare"><img src="../../assets/fight-prepare-icon.png" ><p>准备完毕</p></div>
              <div v-if="game" class="game"><gameone  ref="mychilds1" :lists='slots'  :positions='position'></gameone></div>
            </div>
            <div class="headportrait ">
                <div class="tou-img ac-hedar"><img src="../../assets/hedar-icon1.png" ></div>
                <p class="name">威尔史密斯</p>
                <p class="money"><img src="../../assets/money-icon.png" >99.99</p>
                <p class="przie">0.00</p>
            </div>
            <ul class="winning" style="display: none;">
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
            </ul>
            <div class="division" style="display: none;">
              <div class="division-win" v-if="fail"><p>战无不胜</p></div>
              <div  class="division-lose" v-else><p>LOSE</p></div>
            </div>
            <ul class="losebox">
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
            </ul>
          </div>
          <div>
            <div class="hedar activ" >
              <div v-if="addprepare" class="addprepare">等待加入...</div>
              <div v-if="game" class="game"><gametwo  ref="mychilds2" :lists='slots'  :positions='position'></gametwo></div>
              <div v-if="prepare" class="prepare"><img src="../../assets/fight-prepare-icon.png" ><p>准备完毕</p></div>
            </div>
            <div class="headportrait " :class="{'activcent':addprepare}">   <!-- activcent黄色状态 -->
               <div class="tou-img"><img src="../../assets/fight-add-hedar1.png" ></div>
               <div class="add-btn" v-if="addprepare">立即加入</div>
            </div>
            <ul class="winning " style="display: none;">
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
            </ul>
            <div class="division" style="display: none;">
              <div class="division-win" v-if="win"><p>战无不胜</p></div>
              <div  class="division-lose" v-else><p>LOSE</p></div>
            </div>
          </div>
          <div >
            <div class="hedar" :class="{'activ':win}">
              <div class="fail" v-if="fail">再接再厉</div>
              <div class="win" v-if="win"><img src="../../assets/fight-win-icon.png" ></div>
              <div v-if="game" class="game"><gamethree  ref="mychilds3" :lists='slots'  :positions='position'></gamethree></div>
            </div>
            <div class="headportrait " :class="{'activcent':win}">
                <div class="tou-img ac-hedar"><img src="../../assets/hedar-icon1.png" ></div>
                <p class="name">威尔史密斯</p>
                <p class="money"><img src="../../assets/money-icon.png" >99.99</p>
                <p class="przie">0.00</p>
            </div>
            <ul class="winning " :class="{'activcent':win}">
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
            </ul>
            <div class="division " :class="{'activcent':win}">
              <div class="division-win" v-if="win"><p>战无不胜</p></div>
              <div  class="division-lose" v-else><p>LOSE</p></div>
            </div>
            <ul class="winbox">
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
              <li>
                <div><img src="../../assets/gun2.png" ></div>
                <div>
                  <p>M4A1   消音型...</p>
                  <p><img src="../../assets/money-icon.png" >99.99</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
    </div>
</template>

<script>
  import gamethree from "../gamethree.vue"
  import gametwo from '../gametwo.vue'
  import gameone from '../gameone.vue'
  export default {
    props:[
      'fjId'
    ],
    components:{
      gamethree,
      gametwo,
      gameone
    },
   data () {
      return {
        slots:[
          {items: [1,2,3,1,3,2,1,2,3,1,3,2,1,2,3,1,3,2,1,2,3,1,3,2,1,2,3,1,3,2,1,2,3,1,3,2,1,2,3,1,3,2,1,2,3,1,3,2,]}
        ],
        position: 10,
        indexlist: 0,
        prepare: false,     //准备
        addprepare: true,   //等待加入
        fail: false,  //失败
        win: true,  //赢
        game: true,
      }
    },
    methods: {
        gotobolck(e){
            this.$emit('getout', e);
        }
    },
    created() {
      var that = this
      if(this.game){
        setTimeout(function(){
          that.$refs.mychilds1.childFun1();
          that.$refs.mychilds2.childFun2();
          that.$refs.mychilds3.childFun3();
        },1000)
      }
      console.log(this.fjId)
    }
  }
</script>

<style scoped>
  .fightpx{
    width: 100%;
  }
  .fightpx .box-list{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    position: relative;
  }
  .fightpx .box-list p{
    position: absolute;
    top:20px ;
    right: 15px;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fightpx .box-list p img{
    margin-left: 5px;
  }
  .fightpx .box-list li{
    width: 170px;
    height: 170px;
    background-image: url(../../assets/fight-list-bg.png);
    background-size: 100% 100%;
    position: relative;
  }
  .fightpx .box-list .activ{
    background-image: url(../../assets/fight-list-bgac.png);
  }
  .fightpx .box-list li .box{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -45px;
  }
  .fightpx .box-list li .box img{
    position: absolute;
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-45%,-50%);
  }
  .fightpx .box-list li .wuqi{
    position: absolute;
    max-width: 110px;
    max-height: 100px;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
  }
  .cent-box{
    display: flex;
    justify-content: space-between;
    /* margin: 0 -5px; */
    position: relative;
    overflow: hidden;
  }
  .cent-box>div{
    width: 49%;
    background-color: #162439;
    margin: 0 5px;
  }
  .cent-box>p{
    position: absolute;
    top: 87px;
    height: 2px;
    left: 0;
    right: 0;
    background-color: #00D8FF;
    z-index: 99999;
  }
  .cent-box>p::after{
    position: absolute;
    left: -8px;
    width: 14px;
    height: 14px;
    top: -6px;
    transform: rotate(45deg);
    background-color: #00D8FF;
    content: "";
  }
  .cent-box>p::before{
    position: absolute;
    right: -8px;
    width: 14px;
    height: 14px;
    top: -6px;
    transform: rotate(45deg);
    background-color: #00D8FF;
    content: "";
  }
  .cent-box .hedar{
    background: linear-gradient(0deg, #193049, #182235);
    height: 176px;
    position: relative;
  }
  .cent-box>div>.activ{
    background: linear-gradient(0deg, #3E2E19, #2D1F16);
  }
  .cent-box .hedar .prepare{
    padding-top: 30px;
  }
  .cent-box .hedar .prepare p{
    font-size: 18px;
    color: #20C2AD;
    margin-top: 10px;
  }
  .cent-box .hedar .addprepare{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #FFA22A;
    font-size: 18px;
  }
  .cent-box .hedar .fail{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #24A5D1;
    font-size: 26px;
  }
  .cent-box .hedar .win{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .cent-box .hedar .game{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .cent-box  .headportrait{
    padding-top: 45px;
    background-color: #162439;
    min-height: 220px;
  }
  .cent-box .activcent{
    background-color: #251E18 !important;
  }
  .cent-box  .headportrait .tou-img{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    margin:  0 auto;
    box-sizing: border-box;
    cursor: pointer;
  }
  .cent-box  .ac-hedar{
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
  .cent-box  .headportrait .tou-img img{
    width: 100%;
    height: 100%;
  }
  .cent-box .headportrait .name{
    font-size: 14px;
    color: #FFFFFF;
    margin-top: 10px;
    height: 24px;
    line-height: 24px;
  }
  .cent-box .headportrait .money{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #FFA32A;
    margin-top: 15px;
  }
  .cent-box .headportrait .money img{
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }
  .przie{
    margin-top: 5px;
    font-size: 14px;
    color: #999999;
  }
  .cent-box .headportrait .add-btn{
    margin: 55px auto 0;
    width: 275px;
    height: 57px;
    background-color: #D7661B;
    color: #FFFFFF;
    line-height: 57px;
    font-weight: bold;
    font-size: 22px;
    cursor: pointer;
  }
  .cent-box .winning{
    background-color: #162439;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    padding:20px 5px;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .cent-box .winning li{
    width: 49%;
    background-color: #0C243F;
    padding: 7px;
    box-sizing: border-box;
  }
  .cent-box .activcent li{
    background-color: #322113;
  }
  .cent-box .winning li >div:first-child{
    width: 100%;
    background-color: #16314E;
    height: 122px;
    position: relative;
  }
  .cent-box .activcent li >div:first-child{
    background-color: #3E2D18;
  }
  .cent-box .winning li >div:first-child img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 100px;
    transform: translate(-50%,-50%);
  }
  .cent-box .winning li>div:nth-child(2){
    width: 100%;
    padding: 5px 0 0;
  }
  .cent-box .winning li>div:nth-child(2) >p:first-child{
    color: 14px;
    color: #FFFFFF;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cent-box .winning li>div:nth-child(2) >p:nth-child(2){
    font-size: 14px;
    color: #FFA32A;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 14px;
    margin-top: 5px;
  }
  .cent-box .winning li>div:nth-child(2) >p:nth-child(2) img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .cent-box .division{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cent-box .division .division-lose{
    position: relative;
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  .cent-box .division>div>p{
    z-index: 1;
    position: relative;
    padding: 0 15px;
    display: inline-block;

  }
  .cent-box .division .division-lose p{
    background-color: #162439;
    color: #303946;
  }
  .cent-box .division .division-win p{
    background-color: #251E18 ;
    color: #614522;
  }
  .cent-box .division .division-win{
    position: relative;
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  .cent-box .division .division-lose::after{
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    height: 1px;
    background-color: #303946;
    content: "";
  }
  .cent-box .division .division-win::after{
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    height: 1px;
    background-color: #614522;
    content: "";
  }
  .cent-box .division>p{
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
  }
  .division-win{
    color: #614522;
  }

  .cent-box .losebox{
    background-color: #162439;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    padding:20px 5px;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .cent-box .losebox li{
    width: 49%;
    background-color: #22262E;
    padding: 7px;
    box-sizing: border-box;
  }
  .cent-box .activcent li{
    background-color: #322113;
  }
  .cent-box .losebox li >div:first-child{
    width: 100%;
    background-color: #272E38;
    height: 122px;
    position: relative;
  }
  .cent-box .activcent li >div:first-child{
    background-color: #3E2D18;
  }
  .cent-box .losebox li >div:first-child img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 100px;
    transform: translate(-50%,-50%);
  }
  .cent-box .losebox li>div:nth-child(2){
    width: 100%;
    padding: 5px 0 0;
  }
  .cent-box .losebox li>div:nth-child(2) >p:first-child{
    color: 14px;
    color: #999999;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cent-box .losebox li>div:nth-child(2) >p:nth-child(2){
    font-size: 14px;
    color: #FFA32A;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 14px;
    margin-top: 5px;
  }
  .cent-box .losebox li>div:nth-child(2) >p:nth-child(2) img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .cent-box .winbox{
    background-color: #251E18;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    padding:20px 5px;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .cent-box .winbox li{
    width: 49%;
    background-color: #322113;
    padding: 7px;
    box-sizing: border-box;
  }
  .cent-box .winbox li >div:first-child{
    width: 100%;
    background-color: #3E2D18;
    height: 122px;
    position: relative;
  }
  .cent-box .activcent li >div:first-child{
    background-color: #3E2D18;
  }
  .cent-box .winbox li >div:first-child img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 100px;
    transform: translate(-50%,-50%);
  }
  .cent-box .winbox li>div:nth-child(2){
    width: 100%;
    padding: 5px 0 0;
  }
  .cent-box .winbox li>div:nth-child(2) >p:first-child{
    color: 14px;
    color: #FFFFFF;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cent-box .winbox li>div:nth-child(2) >p:nth-child(2){
    font-size: 14px;
    color: #FFA32A;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 14px;
    margin-top: 5px;
  }
  .cent-box .winbox li>div:nth-child(2) >p:nth-child(2) img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
</style>
